<template>
	<view class="box">
		<!-- banner -->
		<view class="banner">
			<view class="information">
				<view class="left">
					<view class="avatar">
						<image :src="avatar" mode=""></image>
					</view>
					<view class="nickname">{{nickname}}</view>
				</view>
				<view class="right">
					<button @click="edit">编辑资料</button>
				</view>
			</view>
			<view class="total">
				<view class="toutiao"><text>{{publish}}</text><text>头条</text></view>
				<view class="huozhan"><text>{{dianzan}}</text><text>获赞</text></view>
			</view>
		</view>
		<!-- 收藏&历史 -->
		<view class="rows">
			<view class="collection">
				<view>
					<image src="../../static/fav.png" mode="widthFix"></image>
				</view>
				<view>
					收藏
				</view>
			</view>
			<view class="history">
				<view>
					<image src="../../static/history.png" mode="widthFix"></image>
				</view>
				<view>
					历史
				</view>
			</view>
		</view>
		<!-- form	区域 -->
		<view class="form">
			<view class="ctrl">
				<text>修改密码</text><text class="iconfont"></text>
			</view>
			<view class="ctrl">
				<text>联系我们</text><text class="iconfont"></text>
			</view>
		</view>

		<button @click="login">{{btntxt}}</button>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import uses from '../../apis/users/index.js';
	import users from '../../apis/users/index.js';

	export default {
		setup() {

			//获取全局函数和变量
			var {
				proxy
			} = getCurrentInstance()

			// //获取token信息
			// const {
			// 	token
			// } = uni.getStorageSync("token");

			//初始化数据
			const state = reactive({
				token: "",
				btntxt: "请登录",
				nickname: "未登录",
				avatar: "../../static/default-avatar.png",
				dianzan: 0,
				publish: 0,
				sex: "",
				birthday: ""
			})

			//页面切换前台时触发
			onShow(function() {
				let {
					token,
					nickname
				} = uni.getStorageSync("token");
				state.token = token;
				//已登录
				if (state.token) {
					state.btntxt = "退出登录";
					state.nickname = nickname;

					getUserInfo();
				} else {
					state.btntxt = "请登录";
					state.nickname = "未登录";
					state.avatar = "../../static/default-avatar.png"
				}
			})

			//加载页面初始化
			onMounted(function() {

			})

			//获取用户信息
			const getUserInfo = async () => {
				let data = await users.getuserInfo({
					token: state.token
				});

				console.log("userinfo", data);

				//判断是否请求用户信息成功
				if (data.data.code == 0) {
					//设置头像
					state.avatar = data.data.userInfo.avatar;
					state.dianzan = data.data.liked_num;
					state.publish = data.data.publish_num;
					state.sex = data.data.userInfo.sex;
					state.birthday = data.data.userInfo.birthday;

				} else {
					uni.showToast({
						title: "身份已过期"
					})
				}

			}

			//登录&登出
			const login = () => {
				//根据登录状态来判断业务逻辑的执行
				if (!state.token) {
					uni.navigateTo({
						url: '/pages/users/login'
					})
				} else {
					logout();
					state.btntxt = "请登录";
					state.nickname = "未登录";
					state.avatar = "../../static/default-avatar.png";
					state.dianzan = 0;
					state.publish = 0;
				}

			}

			//登出
			const logout = () => {
				uni.clearStorageSync("token");
				uni.showToast({
					title: "已退出登录"
				})
			}

			//编辑
			const edit = () => {

				//如何知道我修改的是谁的信息？

				let token = proxy.$checkLogin();
				if (token) {
					uni.navigateTo({
						url: `/pages/users/edit?nickname=${state.nickname}&avatar=${state.avatar}&sex=${state.sex}&birthday=${state.birthday}`,
					})
				} else {

				}
			}

			return {
				...toRefs(state),
				login,
				logout,
				edit,
			}

		}
	}
</script>

<style scoped lang="scss">
	.box {}

	.banner {
		padding: 15px;
		height: 380rpx;
		background-image: url('../../static/banner.jpg');
		background-size: cover;

		.information {
			padding-top: 150rpx;
			display: flex;
			// line-height: 168rpx;
			vertical-align: middle;

			.left,
			.right {
				flex: 1;
				position: relative;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					background-color: #ffffff;
					// display: inline-block;
					float: left;
				}

				.nickname {
					color: #ffffff;
					// display: inline-block;
					font-size: 32rpx;
					font-weight: 600;
					// width: 120rpx;
					height: 120rpx;
					float: left;
					line-height: 120rpx;
					padding-left: 15rpx;
				}

				button {
					position: absolute;
					top: 23rpx;
					right: 15rpx;
					width: 160rpx;
					height: 58rpx;
					font-size: 24rpx;
					border-radius: 1rem;
				}
			}
		}

		.total {
			display: flex;
			justify-items: center;
			align-items: center;
			padding: 30rpx;
			color: #ffffff;
			font-size: 32rpx;

			.toutiao {
				flex: 1;
				text-align: center;

				text {
					display: block;
				}
			}

			.huozhan {
				flex: 1;
				text-align: center;

				text {
					display: block;
				}
			}
		}
	}

	.rows {
		display: flex;
		font-size: 32rpx;
		padding: 15rpx;
		background-color: #ffffff;

		.history,
		.collection {
			flex: 1;
			text-align: center;

			view {
				width: 70rpx;
				height: 70rpx;
				margin: auto;
			}
		}
	}

	.form {
		background-color: #ffffff;
		margin: 8rpx;

		view {
			padding: 30rpx;
			font-size: 32rpx;
			display: flex;
			border-bottom: 1rpx solid #efefef;

			text {
				flex: 1;
				padding-left: 10rpx;
			}

			.iconfont {
				background-image: url('../../static/arr.png');
				background-size: 32rpx;
				background-repeat: no-repeat;
				background-position-x: 90%;
			}
		}
	}

	button {
		border: 0rpx;
		background-color: #ffffff;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
